<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>星级评价</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--评星级控件start-->
<script type="text/javascript" src="../../libs/js/form/rating.js"></script>
<!--评星级控件end-->

</head>
<body>
<div class="page_content">
 <div class="groupTitle"><span>1、基本用法</span></div>
   		
   		 <div class="rating"></div>

   	<div class="height_15"></div>

 	<div class="groupTitle"><span>2、信息提示</span></div>
   		
   		 <div class="rating" target="#hint1" targetText="请评分" style="float: left"></div>

   		 <div id="hint1" style="width: 50px;height: 30px;padding: 0 10px 0 10px;line-height: 30px;border:solid 1px #cccccc;float: left;"></div>
   		 <div class="clear"></div>

   	<div class="height_15"></div>

   	 <div class="groupTitle"><span>3、自定义提示和个数</span></div>
   		
   		 <div class="rating" target="#hint2" targetText="请评价" hints="太惨了|还行吧|好棒啊" number="3" style="float: left"></div>

   		 <div id="hint2" style="width: 50px;height: 30px;padding: 0 10px 0 10px;line-height: 30px;border:solid 1px #cccccc;float: left;"></div>
   		 <div class="clear"></div>

   	<div class="height_15"></div>

   	<div class="groupTitle"><span>4、使用隐藏域</span></div>
   		
   		<p>如果为组件添加name属性，那么会自动生成一个隐藏域input，用来存储组件当前的value，该input的name与组件name一致。<br/>在提交表单时会用到。</p>
   		<div class="rating" name="bo.raty"></div>
   		<input type="button" value="获取隐藏域选中值" onclick="getHiddenValue()"/>


   		<div class="groupTitle"><span>5、大星星</span></div>
   		
   		 <div class="rating" bigStar="true"></div>

   	<div class="height_15"></div>


   		 	 <div class="groupTitle"><span>6、半颗星选择</span></div>
   		
   		<div class="rating"  bigStar="true" half="true"  name="bo.raty2"></div>

   		
   		 <input type="button" value="获取选中值" onclick="getHiddenValue2()"/>

   	<div class="height_15"></div>


   	<div class="groupTitle"><span>7、只读并在初始时赋值</span></div>
   		
   		 <div class="rating" read="true" value="2.5" bigStar="true"></div>

   	<div class="height_15"></div>
   	
	<div class="groupTitle"><span>8、增加取消按钮</span></div>
   		取消按钮默认在左侧
   		 <div class="rating"  bigStar="true" cancel="true"></div>
		设置按钮默认在右侧
   		 <div class="rating"  bigStar="true" cancel="true" cancelPlace="right"></div>
		自定义取消按钮提示
   		 <div class="rating"  bigStar="true" cancel="true" cancelPlace="right" cancelHint="不想评价了"></div>
		小星星
		<div class="rating"  cancel="true"></div>

   	<div class="height_15"></div>

			
 	
<div class="groupTitle"><span>9、自定义图标</span></div>
   		
   		 <div class="rating" iconName="16|custom-star-on|custom-star-off|custom-star-half|custom-cancel-on|custom-cancel-off" cancel="true" cancelPlace="right"></div>

   	<div class="height_15"></div>
	<div class="groupTitle"><span>10、点击事件</span></div>

   	 <div class="rating" id="rate10"></div>
 	<div class="height_15"></div>
   	<div class="groupTitle"><span>11、综合示例</span></div>
   		
   		 
   		 
		
		<table>
				<tr>
					<td colspan="2" class="ali02"><div id="hint3"></div></td>
				</tr>
				<tr>
					<td colspan="2" style="padding-left:50px;"><div class="rating" target="#hint3" targetText="请评价" bigStar="true" hints="非常差不会再来|感觉很一般|满意，感觉不错|很满意，下次还要来|非常棒,值得推荐给朋友"></div>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="ali02">请您对称赞之处打分，鼓励商家做的更好</td>
				</tr>

				<tr>
					<td>口味</td>
					<td>
						<div class="rating" iconName="24|face-smile|face-cry"></div>
					</td>
				</tr>
				<tr>
					<td>服务</td>
					<td>
						<div class="rating" iconName="24|face-smile|face-cry"></div>
					</td>
				</tr>
				<tr>
					<td>环境</td>
					<td>
						<div class="rating" iconName="24|face-smile|face-cry"></div>
					</td>
				</tr>
		</table>
   		

   </div>	
   <script>
	$(function(){
		$("#rate10").bind("change",function(e,obj,value){
			top.Toast("showNoticeToast", "组件id："+$(obj).attr("id")+"，选中值："+value)
		})
	})
	//获取隐藏域值
	function getHiddenValue(){
		top.Toast("showNoticeToast", $("input:hidden[name='bo.raty']").val());
	}

	function getHiddenValue2(){
		top.Toast("showNoticeToast", $("input:hidden[name='bo.raty2']").val());
	}
	
</script>
</body>
</html>